<template>
	<view class="zh-form-item">
		<view v-if="theLabelType == 'inlie'" class="cu-form-group" >
			<view  class="zh-picker"  @tap="showPicker">
				<view v-if="iconClass||label" class="title" :style="{'width':theLabelWidth,'text-align':theLabelAlign}">
					<text v-if="required" class="text-red " style="padding-right: 4rpx;" :style="{'font-size':theLabelFontSize}">*</text>
					<text v-if="iconClass" :class="iconClass?iconClass:''" style="padding-right: 6rpx;" :style="{'font-size':theLabelFontSize}"></text>
					<text v-if="label" :style="{'font-size':theLabelFontSize}">{{ label }}</text>
				</view>
				<view class="flex-sub" style="height: 45rpx;line-height: 45rpx;" :style="{'font-size':theFontSize,'text-align':theInputAlign}" :class="selectText?'':'input-placeholder-class'">{{selectText?selectText:placeholder}}</view>
			</view>
			<view style="height: 45rpx;line-height: 45rpx;">
				<text style="padding-left: 10rpx;" :style="{'font-size':theFontSize}" class="basefont icon-close text-grey" v-if="clearFlag && selectText&&!disabled"  @click="onClear"></text>
				<text style="padding-left: 10rpx;" :style="{'font-size':theFontSize}" :class="rightIconClass?rightIconClass:'text-gray'" class="basefont icon-right" @click="showPicker"></text>
			</view>
		</view>
		<view v-else class="cu-form-group-block">
			<view v-if="iconClass||label" style="display: flex;align-items:center;justify-content:flex-start;min-height:90rpx" >
				<view v-if="iconClass||label" style="padding-right: 30rpx;font-size: 28rpx;color: #333;position: relative;height: 45rpx;line-height: 45rpx;" :style="{'width':theLabelWidth,'text-align':theLabelAlign}">
					<text v-if="required" class="text-red " style="padding-right: 4rpx;" :style="{'font-size':theLabelFontSize}">*</text>
					<text v-if="iconClass" :class="iconClass?iconClass:''" style="padding-right: 6rpx;" :style="{'font-size':theLabelFontSize}"></text>
					<text v-if="label" :style="{'font-size':theLabelFontSize}">{{ label }}</text>
				</view>
			</view>
			<view class="zh-picker" >
				<view @click="showPicker" class="flex-sub" style="height: 45rpx;line-height: 45rpx;" :style="{'font-size':theFontSize,'text-align':theInputAlign}" :class="selectText?'':'input-placeholder-class'">{{selectText?selectText:placeholder}}</view>
				<view style="height: 45rpx;line-height: 45rpx;">
					<text style="padding-left: 10rpx;" :style="{'font-size':theFontSize}" class="basefont icon-close text-grey" v-if="clearFlag && selectText&&!disabled"  @click="onClear"></text>
					<text style="padding-left: 10rpx;" :style="{'font-size':theFontSize}" :class="rightIconClass?rightIconClass:'text-gray'" class="basefont icon-right" @click="showPicker"></text>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="showFlag?'show':''" >
			<view class="cu-dialog" >
				<view class="cu-bar bg-white solid-bottom" style="padding-bottom: 10rpx;">
					<view class=" text-red" style="font-size: 32rpx;padding-left: 20rpx;" @tap="hideModal">取消</view>
					<view class="search-form round" >
						<input type="text" v-model="searchText" placeholder="输入搜索的关键词" @input="searchClick" ></input>
						<text class="basefont icon-search text-gray"></text>
					</view>
					<view class=" text-blue" style="font-size: 32rpx;padding-right: 20rpx;" @click="onConfirm">确定</view>
				</view>
				<scroll-view scroll-y="true" class="scroll-Y" style="height:700rpx;" >
					<view  v-if="list&&list.length>0"  @tap.stop="" class="cu-list menu sm-border" >
						<view class="cu-item"  v-for="(item,index) in list" :key="index" @click="onSelect(item)">
							<view class="content" >
								<text :class="item.selected?'text-blue':''" >{{item[nodeKey]}}</text>
							</view>
							<view class="action" >
								<text class="basefont icon-check-circle-fill" :class="item.selected?'text-blue':'text-gray'"></text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {fromCheck} from '../zh-form/zh-validate.js'
	export default {
		name: 'zh-form-item-select',
		props: {
			iconClass: {
				type:[Array, String],
				default(){
					return ''
				}
			},
			clearFlag: {
				type: Boolean,
				default: true
			},
			rightButtonFlag:{
				type: Boolean,
				default: false
			},
			rightButton: {
				type: Object,
				default:null,
			},
			value: [String,Array],
			required: Boolean,
			label:String,
			// 表单字段
			prop: String,
			placeholder: {
				type: String,
				default: '请填写'
			},
			
			disabled: {
				type: Boolean,
				default: false
			},
			//字段名称 字体大小
			labelFontSize: [Number, String],
			fontSize:[Number, String],
			// block 独占一行 inlie与内容共一行
			labelType: String,
			// 左边标题的宽度单位rpx
			labelWidth: [Number, String],
			// 标题对齐方式，left|center|right
			labelAlign: String,
			// 输入框对齐方式
			inputAlign: String,
			maxlength: {
				type: [Number, String],
				default: -1
			},
			confirmType: {
				type: String,
				default: 'done'
			},
			//多选 multiple 单选 single
			selectType: {
				type: String,
				default: 'single'
			},
			fixed: Boolean,
			rightText:null,
			overflow: {
				type: String,
				default: 'auto'
			},
			rightIconClass: {
				type:[Array, String],
				default(){
					return ''
				}
			},
			options:{//selector,region数据源
				type:[Array,Object],
				default(){
					return []
				}
			},
			defaultProps:{//selector,linkagle字段转换配置
				type:Object,
				default(){
					return{
						label:"dictValue",
						value:"dictKey"
					}
				}
			},
			defaultType:{
				type:String,
				default:"dictKey"
			},
			authCheck: {
				type: Boolean,
				default: null // 动态校验，即值一改变就对数据进行校验
			}
		},
		data() {
			return {
				showFlag: false,
				searchText:'',
				selectText:'',
				selectValue:'',
				selectList:[],
				selectObj:{},
				selectObjList:[],
				list:[],
			}
		},
		watch:{
			value(val){
				if(this.options.length!=0){
					this.getListData();
				}
			},
			options(val){
				this.getListData();
			},
			selectText() { // 监听value 检查是否做动态校验
				if(this.authCheck||this.authCheck===null&& this.theForm.authCheck){
					this.validate()
				}
			}
		},
		computed:{
			nodeKey(){
				return this.defaultProps.label;
			},
			nodeValue(){
				return this.defaultProps.value;
			},
			theForm() {
				let parent = this.$parent;
				let parentName = parent.$options.name;
				while (parentName !== null && parentName !== 'ZhForm') {
				  parent = parent ? parent.$parent : null;
				  parentName = parent ? parent.$options.name : null;
				}
				let theForm = {}
				if(parent) {
					this.formField.forEach(key => {
						theForm[key] = parent[key]
					})
				}	
				return theForm;
			},
			theLabelType() {
				let labelType = this.labelType || this.theForm.labelType
				if(!labelType){
					if(this.type=='textarea'){
						labelType='block'
					}else{
						labelType='inlie'
					}
				}
				return labelType
			},
			theLabelWidth() {
				let width  = this.labelWidth || this.theForm.labelWidth
				if(!isNaN(Number(width))) {
					width += 'rpx'
				}
				return width
			},
			theLabelAlign(){
				let labelAlign = this.labelAlign || this.theForm.labelAlign
				if(!labelAlign){
					labelAlign='right'
				}
				return labelAlign
			},
			theInputAlign(){
				let inputAlign = this.inputAlign || this.theForm.inputAlign
				if(!inputAlign){
					inputAlign='right'
				}
				return inputAlign
			},
			theFontSize(){
				let fontSize = this.fontSize || this.theForm.fontSize
				if(!fontSize){
					fontSize='28rpx'
				}else{
					if(!isNaN(Number(fontSize))) {
						fontSize += 'rpx'
					}
				}
				return fontSize
			},
			theLabelFontSize(){
				let labelFontSize = this.labelFontSize || this.theForm.labelFontSize||this.fontSize || this.theForm.fontSize
				if(!labelFontSize){
					labelFontSize='28rpx'
				}else{
					if(!isNaN(Number(labelFontSize))) {
						labelFontSize += 'rpx'
					}
				}
				return labelFontSize
			}
		},
		methods: {
			getListData(){
				let data;
				if(this.searchText){
					data = this.options.filter((item) => {
						return item[this.nodeKey].indexOf(this.searchText) > -1
					})
				}else{
					data=[...this.options]
				}
				let val;
				if(this.selectType=='single'){
					val=this.selectValue||this.value
				}else{
					if(Array.isArray(this.value)){
						val=this.selectList||this.value||[]
					}
				}
				let selectList=[];
				let selectObjList=[];
				let selectValue='';
				let selectObj={};
				if(val){
					let arrayFlag = Array.isArray(val);
					data.forEach((item) => {
						item.selected=false
						if(arrayFlag){
							val.forEach((v) => {
								if(this.defaultType==this.nodeValue){
									if(item[this.nodeValue]==v){
										item.selected=true
										selectList.push(v)
										selectObjList.push(item)
										return
									}
								}else{
									if(item[this.nodeKey]==v){
										item.selected=true
										selectList.push(v)
										selectObjList.push(item)
										return
									}
								}
							})
						}else{
							if(this.defaultType==this.nodeValue){
								if(item[this.nodeValue]==val){
									item.selected=true
									selectObj=item
									selectValue=val
									return
								}
							}else{
								if(item[this.nodeKey]==val){
									item.selected=true
									selectObj=item
									selectValue=val
									return
								}
							}
						}
					})
				}else{
					data.forEach((item) => {
						item.selected=false
					})
				}
				this.selectList=selectList
				this.selectObjList=selectObjList
				this.selectValue=selectValue
				this.selectObj=selectObj
				this.list=data
			},
			showPicker(){
				if(!this.disabled){
					this.showFlag=true
				}
				this.getListData();
			},
			hideModal(){
				this.showFlag=false
			},
			onClear(event) {
				this.selectList=[];
				this.selectObjList=[];
				this.selectValue='';
				this.selectObj={};
				this.searchText=''
				this.selectText=''
				if(this.selectType=='single'){
					this.$emit("input", '');
				}else{
					this.$emit("input", []);
				}
			},
			searchClick(){
				this.getListData()
			},
			onSelect(item){
				if(this.selectType=='single'){
					//单选
					let selectList=[];
					let selectObjList=[];
					if(item.selected){
						this.selectValue=''
						this.selectList=selectList;
						this.selectObj={}
						this.selectObjList=[]
						let data=[...this.list]
						data.forEach((item) => {
							item.selected=false
						})
						this.list=data
					}else{
						if(this.defaultType==this.nodeValue){
							this.selectValue=item[this.nodeValue]
						}else{
							this.selectValue=item[this.nodeKey]
						}
						this.getListData()
					}
				}else{
					//多选
					let selectList=[...this.selectList];
					let flag=true;
					selectList.forEach((v,index, arr) => {
						if(this.defaultType==this.nodeValue){
							if(item[this.nodeValue]==v){
								arr.splice(index, 1);
								flag=false;
								return
							}
						}else{
							if(item[this.nodeKey]==v){
								arr.splice(index, 1);
								flag=false;
								return
							}
						}
					})
					if(flag){
						if(this.defaultType==this.nodeValue){
							selectList.push(item[this.nodeValue])
						}else{
							selectList.push(item[this.nodeKey])
						}	
					}
					this.selectList=selectList
					this.getListData()
				}
			},
			onConfirm(){
				//确定
				let selectText=''
				let data={}
				if(this.selectType=='single'){
					data.value=this.selectValue
					selectText=this.selectObj[this.nodeKey]
					data.result=selectText
					data.obj=this.selectObj
					this.$emit("input", this.selectValue);
				}else{
					data.value=this.selectList
					this.selectObjList.forEach((item) => {
						if(selectText){
							selectText=selectText+','+item[this.nodeKey]
						}else{
							selectText=item[this.nodeKey]
						}
					})
					data.result=selectText
					data.obj=this.selectObjList
					this.$emit("input", this.selectList)
				}
				this.selectText=selectText
				this.$emit('selectChange', data)
				this.hideModal()
			},
			// 规则校验
			validate() {
				if(this.required&& (this.value == null || this.value == '')){
					// 是否必填
					this.msg = this.label + '不能为空'
				}else{
					if(!this.theForm.rules) return
					let rule = this.theForm.rules[this.prop]
					this.msg = ''
					if(rule) {
						if(rule.required && (this.value == null || this.value == '')) {
							// 是否必填
							this.msg = rule.msg || this.label + '不能为空'
						}else if(rule.validator) {
							// 自定义规则校验函数
							let bol = rule.validator(this.value,rule)
							if(typeof bol == 'string') {
								this.msg = bol
							}else if(!bol) {
								this.msg = rule.message || this.label + '不符合规则'
							}
						}else if(rule.rule && this.value != null && this.value != '') {
							// 默认校验规则
							let result = fromCheck(this.value, rule.rule, this.theForm.form)
							if(result !== true) {
								this.msg = this.label + result.msg
								if(rule.message) {
									if(typeof rule.message === 'string') {
										this.msg = rule.message
									} else if(rule.message[result.rule]) {
										this.msg = rule.message[result.rule]
									}
								}
							}
						}
					}
				}
				if(this.msg != '') {
					if(this.theForm.msgType == 'out') {
						// 弹框
						uni.showModal({ content: this.msg,showCancel:false})
					}else if(this.theForm.msgType == 'msg'){
						// 消息框
						uni.showToast({
							icon: 'none',
							title: this.msg,
						})
					}
				}
				return !this.msg
			}
		}
	}
</script>

<style lang="scss">
	.input-placeholder-class {
		color: $uni-text-color-placeholder;
	}
	.zh-form-item {
		border-bottom: 1rpx solid #eee;
	}
</style>
